<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/echarts.min.js"></script>
</head>
<body>
<div style="margin-bottom:20px">
    上一篇中讲了如何绘制一个简单的柱状图，这次要画的是饼状图，饼图主要是通过扇形的弧度表现不同类目的数据在总合中的占比，
    它的数据格式比柱状图梗简单，只有一维的数组，不需要给类目。因为不在支教坐标系上，所以也不需要xAxis,yAxis.
</div>

<div id="main" style="width:600px; height:400px; float:left"></div>

<div id="main1" style="width:600px; height:400px; float:left"></div>

<script type="text/javascript">
  var myChart=echarts.init(document.getElementById('main'));
  myChart.setOption({
      series:[
          {
              name:'访问来源',
              type:'pie',
              radius:'55%',
              data:[
                  {value:235,name:'视频广告'},
                  {value:274,name:'联盟广告'},
                  {value:310,name:'邮件营销'},
                  {value:335,name:'直接访问'},
                  {value:400,name:'搜索引擎'},
              ]

          }
      ]
  })

  var myChart1=echarts.init(document.getElementById('main1'));
  myChart1.setOption({
//      背景色是全局的
      backgroundColor:'#2c343c',
//      文本的样式可以设置全局的textStyle
      textStyle:{
          color: 'rgba(255, 255, 255, 0.3)',
      },
      series:[{
          name:'访问来源',
          roseType:'angle',
          type:'pie',
          radius:'55%',
          data:[   //每个扇形颜色的可以通过分别设置data下的数据项实现
              {value:235,
               name:'视频广告',
               itemStyle:{
                  normal:{
                      color:'#c23531',
                  }
               }
              },
              {value:274,
               name:'联盟广告',
               itemStyle:{
                  normal:{
                    color:'#eff12f',
                      }
               }
              },
              {value:310,
               name:'邮件营销',
               itemStyle:{
                  normal:{
                      color:'#c1c2d3',
                  }
               }
              },
              {value:335,
               name:'直接访问',
               itemStyle:{
                  normal:{
                      color:'#b99094',
                  }
               }
              },
              {value:400,
               name:'搜索引擎',
               itemStyle:{
                  normal:{
                      color:'#18d6b9',
                  }
               }
              },
          ]
      }],
      itemStyle:{
       normal:{
           //阴影的大小
           shadowBlur:200,
           //阴影水平方向上的偏移
           shadowOffsetX:0,
           //阴影垂直方向上的偏移
           shadowOffsetY:0,
           //阴影颜色
           shadowColor:'rgba(0, 0, 0, 0.5)',
//           可以设置扇形的颜色
//           color:'#c23531'
       },
       emphasis:{
           shadowBlur:200,
           shadowColor:'rgba(0, 0, 0, 0.5)'

       }
      },
//      饼图的话还要将标签的视觉引导线的颜色设为浅色
      labelLine:{
          normal:{
              lineStyle:{
                  color: 'rgba(255, 255, 255, 0.3)',
              }
          }
      },
//      也可以每个系列分别设置，每个系列的文本设置在label.normal.textStyle
      label:{
          normal:{
              textStyle:{
                  color: 'rgba(255, 255, 255, 0.3)'
              }
          }
      },
//      但是这次因为只有明暗度的变化，所以有一种更快捷的方式是通过 visualMap 组件将数值的大小映射到明暗度。
      visualMap:{
//          不显示visualMap组件，只用于阴暗度的映射
          show:false,
          //映射的最小值为80
          min:80,
          //映射的最大值为600
          max:600,
          inRange:{
              //明暗度的范围是0到1
              colorLightness:[0,1]
          }
      }

  })
</script>

<div style="display:block;">
    itemStyle都会有normal和emphasis两个选项，normal选项是正常展示下的样式，emphasis是鼠标hover时候的高亮样式。这个示例里是正常的样式下加
    阴影，但是可能更多的时候是hover的时候通过阴影突出。<br>
    跟itemStyle一样，label和labelLine的样式也有normal和emphasis两种状态。
</div>
</body>
</html>